<template>
  <div class="site-container">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="站点城市">
          <el-input v-model="searchForm.city" placeholder="请输入站点城市"></el-input>
        </el-form-item>
        <el-form-item label="站点区/县">
          <el-input v-model="searchForm.district" placeholder="请输入站点区/县"></el-input>
        </el-form-item>
        <el-form-item label="站点名称">
          <el-input v-model="searchForm.name" placeholder="请输入站点名称"></el-input>
        </el-form-item>
        <el-form-item label="站点状态">
          <el-select v-model="searchForm.status" placeholder="请选择站点状态">
            <el-option label="正常" :value="1"></el-option>
            <el-option label="暂停营业" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button
            v-if="userRole === 0"
            type="primary"
            @click="openAddSiteDialog"
          >添加站点</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 站点列表 -->
    <el-table :data="siteList" style="width: 100%" v-loading="loading">
      <el-table-column prop="siteName" label="站点名称" width="180"></el-table-column>
      <el-table-column prop="siteAddress" label="站点地址" width="300"></el-table-column>
      <el-table-column prop="city" label="城市" width="120"></el-table-column>
      <el-table-column prop="district" label="区/县" width="120"></el-table-column>
      <el-table-column prop="siteUserName" label="联系人姓名" width="150"></el-table-column>
      <el-table-column prop="siteUserPhone" label="联系电话" width="150"></el-table-column>
      <el-table-column label="营业时间" width="300">
        <template slot-scope="scope">
          <div v-for="(hours, index) in scope.row.businessHours" :key="index">
            {{ hours.day }}: {{ hours.startTime }} - {{ hours.endTime }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? '正常' : '暂停营业' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="creatTime" label="创建时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.creatTime ? scope.row.creatTime.replace('T', ' ') : '' }}
        </template>
      </el-table-column>
      <el-table-column v-if="userRole === 0" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            v-if="userRole === 0"
            size="mini"
            type="primary"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="userRole === 0"
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[3, 4, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 新增站点对话框 -->
    <el-dialog title="新增站点" :visible.sync="addDialogVisible" width="800px">
      <el-form :model="form" :rules="rules" ref="addSiteForm" label-width="120px">
        <el-form-item label="站点名称" prop="siteName">
          <el-input v-model="form.siteName" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="站点地址" prop="siteAddress">
          <el-input v-model="form.siteAddress" class="form-input">
            <el-button slot="append" icon="el-icon-location" @click="openMap"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="form.longitude" readonly class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="form.latitude" readonly class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="站点联系人电话" prop="siteUserPhone">
          <el-input v-model="form.siteUserPhone" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="站点联系人姓名" prop="siteUserName">
          <el-input v-model="form.siteUserName" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="站点简介" prop="siteDesc">
          <el-input type="textarea" v-model="form.siteDesc" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="form.city" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="区/县" prop="district">
          <el-input v-model="form.district" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="营业时间">
          <div class="business-hours">
            <div class="time-row">
              <span class="time-label">周一至周五：</span>
              <el-time-picker
                v-model="form.businessHours[0].startTime"
                placeholder="开始时间"
                format="HH:mm"
                value-format="HH:mm"
                class="time-picker"
              ></el-time-picker>
              <span class="time-separator">至</span>
              <el-time-picker
                v-model="form.businessHours[0].endTime"
                placeholder="结束时间"
                format="HH:mm"
                value-format="HH:mm"
                class="time-picker"
              ></el-time-picker>
            </div>
            <div class="time-row">
              <span class="time-label">周六、周日：</span>
              <el-time-picker
                v-model="form.businessHours[1].startTime"
                placeholder="开始时间"
                format="HH:mm"
                value-format="HH:mm"
                class="time-picker"
              ></el-time-picker>
              <span class="time-separator">至</span>
              <el-time-picker
                v-model="form.businessHours[1].endTime"
                placeholder="结束时间"
                format="HH:mm"
                value-format="HH:mm"
                class="time-picker"
              ></el-time-picker>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑站点对话框 -->
    <el-dialog title="编辑站点" :visible.sync="editDialogVisible" width="800px">
      <el-form :model="editForm" :rules="rules" ref="editSiteForm" label-width="120px">
        <el-form-item label="站点名称" prop="siteName">
          <el-input v-model="editForm.siteName" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="站点地址" prop="siteAddress">
          <el-input v-model="editForm.siteAddress" class="form-input">
            <el-button slot="append" icon="el-icon-location" @click="openMap"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="editForm.longitude" readonly class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="editForm.latitude" readonly class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="站点联系人电话" prop="siteUserPhone">
          <el-input v-model="editForm.siteUserPhone" class="form-input"></el-input>
        </el-form-item>
        <!-- <el-form-item label="站点联系人姓名" prop="siteUserName">
          <el-input v-model="editForm.siteUserName" class="form-input"></el-input>
        </el-form-item> -->
        <el-form-item label="站点简介" prop="siteDesc">
          <el-input type="textarea" v-model="editForm.siteDesc" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-input v-model="editForm.city" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="区/县" prop="district">
          <el-input v-model="editForm.district" class="form-input"></el-input>
        </el-form-item>
        <el-form-item label="站点状态" prop="status">
          <el-select v-model="editForm.status" class="form-input">
            <el-option label="正常" :value="1"></el-option>
            <el-option label="暂停营业" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营业时间">
          <div class="business-hours">
            <div class="time-row">
              <span class="time-label">周一至周五：</span>
              <el-time-picker
                v-model="editForm.businessHours[0].startTime"
                placeholder="开始时间"
                format="HH:mm"
                value-format="HH:mm"
                class="time-picker"
              ></el-time-picker>
              <span class="time-separator">至</span>
              <el-time-picker
                v-model="editForm.businessHours[0].endTime"
                placeholder="结束时间"
                format="HH:mm"
                value-format="HH:mm"
                class="time-picker"
              ></el-time-picker>
            </div>
            <div class="time-row">
              <span class="time-label">周六、周日：</span>
              <el-time-picker
                v-model="editForm.businessHours[1].startTime"
                placeholder="开始时间"
                format="HH:mm"
                value-format="HH:mm"
                class="time-picker"
              ></el-time-picker>
              <span class="time-separator">至</span>
              <el-time-picker
                v-model="editForm.businessHours[1].endTime"
                placeholder="结束时间"
                format="HH:mm"
                value-format="HH:mm"
                class="time-picker"
              ></el-time-picker>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 高德地图弹窗 -->
    <el-dialog title="选择位置" :visible.sync="mapVisible" width="80%">
      <el-autocomplete
        v-model="searchQuery"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入地点名称"
        @select="handleSelect"
        style="margin-bottom: 10px;"
      ></el-autocomplete>
      <div id="container" style="width:100%;height:500px;"></div>
    </el-dialog>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'Site',
  data() {
    return {
      searchForm: {
        city: '',
        district: '',
        name: '',
        status: ''
      },
      siteList: [],
      loading: false,
      pageNum: 1,
      pageSize: 3,
      total: 0,
      form: {
        siteName: '',
        siteAddress: '',
        longitude: null,
        latitude: null,
        siteUserPhone: '',
        siteUserName: '',
        siteDesc: '',
        city: '',
        district: '',
        businessHours: [
          {
            day: '周一至周五',
            startTime: '',
            endTime: ''
          },
          {
            day: '周六、周日',
            startTime: '',
            endTime: ''
          }
        ]
      },
      rules: {
        siteName: [
          { required: true, message: '请输入站点名称', trigger: 'blur' },
          { min: 2, max: 50, message: '站点名称长度在2到50个字符之间', trigger: 'blur' }
        ],
        siteAddress: [
          { required: true, message: '请输入站点地址', trigger: 'blur' },
          { min: 5, max: 200, message: '站点地址长度在5到200个字符之间', trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: '请选择站点位置', trigger: 'change' },
          { pattern: /^-?\d+(\.\d+)?$/, message: '经度格式不正确', trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: '请选择站点位置', trigger: 'change' },
          { pattern: /^-?\d+(\.\d+)?$/, message: '纬度格式不正确', trigger: 'blur' }
        ],
        siteUserPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        siteUserName: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '联系人姓名长度在2到20个字符之间', trigger: 'blur' }
        ],
        siteDesc: [
          { required: true, message: '请输入站点简介', trigger: 'blur' },
          { min: 10, max: 500, message: '站点简介长度在10到500个字符之间', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请输入城市', trigger: 'blur' },
          { min: 2, max: 20, message: '城市名称长度在2到20个字符之间', trigger: 'blur' }
        ],
        district: [
          { required: true, message: '请输入区/县', trigger: 'blur' },
          { min: 2, max: 20, message: '区/县名称长度在2到20个字符之间', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择站点状态', trigger: 'change' }
        ],
        'businessHours.0.startTime': [
          { required: true, message: '请选择周一至周五的开始时间', trigger: 'change' },
          { validator: this.validateBusinessHours, trigger: 'change' }
        ],
        'businessHours.0.endTime': [
          { required: true, message: '请选择周一至周五的结束时间', trigger: 'change' },
          { validator: this.validateBusinessHours, trigger: 'change' }
        ],
        'businessHours.1.startTime': [
          { required: true, message: '请选择周六、周日的开始时间', trigger: 'change' },
          { validator: this.validateBusinessHours, trigger: 'change' }
        ],
        'businessHours.1.endTime': [
          { required: true, message: '请选择周六、周日的结束时间', trigger: 'change' },
          { validator: this.validateBusinessHours, trigger: 'change' }
        ]
      },
      mapVisible: false,
      map: null,
      searchQuery: '',
      placeSearch: null,
      isMapReady: false,
      suggestions: [],
      addDialogVisible: false,
      editDialogVisible: false,
      editForm: {
        id: null,
        siteName: '',
        siteAddress: '',
        longitude: null,
        latitude: null,
        siteUserPhone: '',
        siteUserName: '',
        siteDesc: '',
        city: '',
        district: '',
        status: 1,
        businessHours: [
          {
            day: '周一至周五',
            startTime: '',
            endTime: ''
          },
          {
            day: '周六、周日',
            startTime: '',
            endTime: ''
          }
        ]
      },
      userRole: null, // 添加用户角色状态
    };
  },
  mounted() {
    this.getUserRoleFromToken(); // 在组件挂载时获取用户角色
    this.fetchSiteList();
    // 设置安全密钥
    window._AMapSecurityConfig = {
      securityJsCode: '3242f3455132c5fd8bbd976165cf3edd'
    };

    AMapLoader.load({
      key: "96b8191f938c9fee3541bd080df37ac1", 
      version: "2.0",
      plugins: ['AMap.ToolBar', 'AMap.PlaceSearch']
    }).then((AMap) => {
      this.AMap = AMap;
      console.log('高德地图API加载成功');
    }).catch(e => {
      console.error('地图加载失败:', e);
    });
  },
  methods: {
    // 从token中获取用户角色
    getUserRoleFromToken() {
      try {
        const loginUser = JSON.parse(localStorage.getItem("loginUser"));
        console.log('loginUser:', loginUser);
        if (loginUser && loginUser.token) {
          const base64Url = loginUser.token.split('.')[1];
          const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
          const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
          }).join(''));

          const payload = JSON.parse(jsonPayload);
          console.log('Token payload:', payload);
          // 修改role的解析逻辑
          if (payload.role !== undefined && payload.role !== null) {
            this.userRole = Number(payload.role);
          } else {
            this.userRole = null;
          }
          console.log('Parsed userRole:', this.userRole);
        }
      } catch (error) {
        console.error('解析token失败:', error);
        this.userRole = null;
      }
    },
    // 获取站点列表
    fetchSiteList() {
      this.loading = true;
      this.$http.get('/zsd-merchant/site/list', {
        params: {
          ...this.searchForm,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(response => {
        if (response.data.code === 200) {
          this.siteList = response.data.data.records;
          this.total = response.data.data.total;
        } else {
          this.$message.error(response.data.msg || '获取站点列表失败');
        }
      }).catch(error => {
        console.error('Error:', error);
        this.$message.error('获取站点列表失败');
      }).finally(() => {
        this.loading = false;
      });
    },

    // 搜索
    handleSearch() {
      this.pageNum = 1;
      this.fetchSiteList();
    },

    // 重置搜索
    resetSearch() {
      this.searchForm = {
        city: '',
        district: '',
        name: '',
        status: ''
      };
      this.handleSearch();
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchSiteList();
    },

    // 页码改变
    handleCurrentChange(val) {
      this.pageNum = val;
      this.fetchSiteList();
    },

    // 编辑站点
    handleEdit(row) {
      this.editDialogVisible = true;
      this.editForm = {
        id: row.id,
        siteName: row.siteName,
        siteAddress: row.siteAddress,
        longitude: row.longitude,
        latitude: row.latitude,
        siteUserPhone: row.siteUserPhone,
        siteUserName: row.siteUserName,
        siteDesc: row.siteDesc,
        city: row.city,
        district: row.district,
        status: row.status,
        businessHours: row.businessHours || [
          {
            day: '周一至周五',
            startTime: '',
            endTime: ''
          },
          {
            day: '周六、周日',
            startTime: '',
            endTime: ''
          }
        ]
      };
    },

    // 删除站点
    handleDelete(row) {
      this.$confirm('确认删除该站点吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete('/zsd-merchant/site/delete', {
          params: {
            id: row.id
          }
        }).then(response => {
          if (response.data.code === 200) {
            this.$message.success('删除成功');
            this.fetchSiteList();
          } else {
            this.$message.error(response.data.msg || '删除失败');
          }
        }).catch(error => {
          console.error('Error:', error);
          this.$message.error('删除失败');
        });
      }).catch(() => {});
    },

    // 打开添加站点对话框
    openAddSiteDialog() {
      this.addDialogVisible = true;
      this.form = {
        siteName: '',
        siteAddress: '',
        longitude: null,
        latitude: null,
        siteUserPhone: '',
        siteUserName: '',
        siteDesc: '',
        city: '',
        district: '',
        businessHours: [
          {
            day: '周一至周五',
            startTime: '',
            endTime: ''
          },
          {
            day: '周六、周日',
            startTime: '',
            endTime: ''
          }
        ]
      };
    },

    // 打开地图选择
    openMap() {
      this.mapVisible = true;
      this.$nextTick(() => {
        if (!this.map && this.AMap) {
          const AMap = this.AMap;

          // 定义一个函数来初始化地图
          const initMap = (center = [116.397428, 39.90923]) => {
            this.map = new AMap.Map('container', {zoom: 13, center: center});
            var toolbar = new AMap.ToolBar();
            this.map.addControl(toolbar);

            AMap.plugin('AMap.PlaceSearch', () => {
              this.placeSearch = new AMap.PlaceSearch({map: this.map});
              this.isMapReady = true;
            });

            this.map.on('click', (e) => {
              const currentForm = this.editDialogVisible ? this.editForm : this.form;
              currentForm.longitude = e.lnglat.getLng();
              currentForm.latitude = e.lnglat.getLat();
              
              // 获取地址信息
              const geocoder = new AMap.Geocoder();
              geocoder.getAddress([e.lnglat.getLng(), e.lnglat.getLat()], (status, result) => {
                if (status === 'complete' && result.regeocode) {
                  currentForm.siteAddress = result.regeocode.formattedAddress;
                  currentForm.city = result.regeocode.addressComponent.city;
                  currentForm.district = result.regeocode.addressComponent.district;
                }
              });
              
              this.$message.success(`已选择位置：${currentForm.longitude}, ${currentForm.latitude}`);
            });
          };

          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
              (position) => {
                const userLocation = [position.coords.longitude, position.coords.latitude];
                initMap(userLocation);
              },
              (error) => {
                console.warn('获取用户位置失败:', error.message);
                initMap();
              }
            );
          } else {
            console.warn('浏览器不支持地理定位');
            initMap();
          }

          const checkPlaceSearchReady = () => {
            if (!this.placeSearch && this.isMapReady === false) {
              setTimeout(checkPlaceSearchReady, 500);
            }
          };
          checkPlaceSearchReady();
        }
      });
    },

    querySearchAsync(queryString, cb) {
      if (queryString) {
        if(this.placeSearch && this.isMapReady){
          this.placeSearch.search(queryString, (status, result) => {
            if (status === 'complete' && result.poiList.count > 0) {
              cb(result.poiList.pois.map(poi => ({
                value: poi.name,
                location: poi.location
              })));
            } else {
              cb([]);
            }
          });
        } else {
          console.error("PlaceSearch instance is not ready.");
          setTimeout(() => {
            this.querySearchAsync(queryString, cb);
          }, 500);
        }
      } else {
        cb([]);
      }
    },

    handleSelect(item) {
      const currentForm = this.editDialogVisible ? this.editForm : this.form;
      currentForm.longitude = item.location.lng;
      currentForm.latitude = item.location.lat;
      currentForm.siteAddress = item.value;
      this.map.setCenter([item.location.lng, item.location.lat]);
      this.$message.success(`已选择位置：${item.value} (${item.location.lng}, ${item.location.lat})`);
    },

    // 验证营业时间
    validateBusinessHours(rule, value, callback) {
      const form = this.editDialogVisible ? this.editForm : this.form;
      const index = rule.field.includes('0') ? 0 : 1;
      const startTime = form.businessHours[index].startTime;
      const endTime = form.businessHours[index].endTime;

      if (startTime && endTime) {
        const start = new Date(`2000-01-01T${startTime}`);
        const end = new Date(`2000-01-01T${endTime}`);
        
        if (start >= end) {
          callback(new Error('开始时间不能大于或等于结束时间'));
        } else {
          callback();
        }
      } else {
        callback();
      }
    },

    // 修改提交表单方法
    submitForm() {
      this.$refs['addSiteForm'].validate((valid) => {
        if (valid) {
          // 验证营业时间
          const isBusinessHoursValid = this.form.businessHours.every(hours => {
            if (hours.startTime && hours.endTime) {
              const start = new Date(`2000-01-01T${hours.startTime}`);
              const end = new Date(`2000-01-01T${hours.endTime}`);
              return start < end;
            }
            return true;
          });

          if (!isBusinessHoursValid) {
            this.$message.error('营业时间设置不正确，开始时间不能大于或等于结束时间');
            return;
          }

          const addSiteForm = {
            ...this.form,
            businessHours: this.form.businessHours.filter(hours => hours.startTime && hours.endTime)
          };
          
          this.$http.post('/zsd-merchant/site/add', addSiteForm).then(response => {
            if (response.data.code === 200) {
              this.$message.success('新增站点成功');
              this.addDialogVisible = false;
              this.fetchSiteList();
            } else {
              this.$message.error(response.data.msg || '新增站点失败');
            }
          }).catch(error => {
            console.error('Error:', error);
            this.$message.error('新增站点失败');
          });
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },

    // 修改编辑表单提交方法
    submitEditForm() {
      this.$refs['editSiteForm'].validate((valid) => {
        if (valid) {
          // 验证营业时间
          const isBusinessHoursValid = this.editForm.businessHours.every(hours => {
            if (hours.startTime && hours.endTime) {
              const start = new Date(`2000-01-01T${hours.startTime}`);
              const end = new Date(`2000-01-01T${hours.endTime}`);
              return start < end;
            }
            return true;
          });

          if (!isBusinessHoursValid) {
            this.$message.error('营业时间设置不正确，开始时间不能大于或等于结束时间');
            return;
          }

          const updateSiteForm = {
            ...this.editForm,
            businessHours: this.editForm.businessHours.filter(hours => hours.startTime && hours.endTime)
          };
          
          this.$http.put('/zsd-merchant/site/update', updateSiteForm).then(response => {
            if (response.data.code === 200) {
              this.$message.success('编辑站点成功');
              this.editDialogVisible = false;
              this.fetchSiteList();
            } else {
              this.$message.error(response.data.msg || '编辑站点失败');
            }
          }).catch(error => {
            console.error('Error:', error);
            this.$message.error('编辑站点失败');
          });
        } else {
          console.log('验证失败');
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.site-container {
  padding: 20px;
  background-color: #fff;
  min-height: calc(100vh - 40px);
}

.search-bar {
  margin-bottom: 20px;
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-table {
  margin-top: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 20px;
  padding: 10px 20px;
  text-align: right;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-form-item {
  margin-bottom: 18px;
}

.el-form-item__label {
  font-weight: bold;
}

.el-input {
  width: 220px;
}

.el-select {
  width: 220px;
}

.el-textarea {
  width: 220px;
}

.el-button {
  padding: 9px 20px;
}

.el-button + .el-button {
  margin-left: 10px;
}

.el-dialog {
  margin-top: 5vh !important;
  border-radius: 8px;
}

.el-dialog__header {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.el-dialog__body {
  padding: 30px 20px;
}

.el-dialog__footer {
  padding: 20px;
  border-top: 1px solid #ebeef5;
}

.el-tag {
  padding: 0 10px;
  height: 28px;
  line-height: 26px;
}

.el-table th {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: bold;
}

.el-table td, .el-table th {
  padding: 12px 0;
}

.el-pagination {
  padding: 0;
  font-weight: normal;
}

.el-pagination button {
  min-width: 32px;
  height: 32px;
}

.el-pagination .el-select .el-input {
  width: 110px;
}

.el-pagination .el-select .el-input input {
  height: 32px;
}

.form-input {
  width: 400px !important;
}

.business-hours {
  width: 100%;
}

.time-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.time-row:last-child {
  margin-bottom: 0;
}

.time-label {
  min-width: 100px;
  text-align: right;
  margin-right: 10px;
}

.time-picker {
  width: 140px !important;
}

.time-separator {
  margin: 0 10px;
}

.el-textarea {
  width: 400px !important;
}

.el-select {
  width: 400px !important;
}

.el-dialog .el-form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
</style>